import {useModel} from '@umijs/max';
import type {TabsProps} from 'antd';
import {Tabs} from 'antd';
import dayjs from 'dayjs';
import {isNotBlank} from 'web-plugin-utils';
import styles from './index.less';
import {useEffect} from "react";

const Patient = () => {
    const {patient} = useModel('patient');
    const userInfo = JSON.parse(localStorage.getItem('userInfo')!);

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: (
                <div style={{width: 150, textAlign: 'center', fontSize: 24}}>
                    住院病历
                </div>
            ),
            children: ``,
        },
        {
            key: '2',
            label: (
                <div style={{width: 150, textAlign: 'center', fontSize: 24}}>
                    检查报告
                </div>
            ),
            children: ``,
        },
    ];

    return (
        <div className={styles.container}>
            <div className={styles.left}>
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                    }}
                >
                    <img src="/img/patient.jpg" width="120" height="120"/>
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            width: 80,
                            marginTop: 10,
                        }}
                    >
                        <div>&emsp; </div>
                        <div>&emsp; </div>
                    </div>
                </div>

                <div style={{marginTop: 62}}>基本信息</div>
                <div style={{marginTop: 21}}>姓名：{patient?.name}</div>
                <div style={{marginTop: 21}}>住院号：{patient?.hospitalNumber}</div>

                <div
                    style={{
                        marginTop: 29,
                        height: 1,
                        background: '#3C559A',
                    }}
                ></div>

                <div style={{marginTop: 32}}>手术信息</div>
                <div style={{marginTop: 21}}>
                    手术日期：
                    {isNotBlank(patient?.operationTime)
                        ? dayjs(patient?.operationTime).format('YYYY-MM-DD')
                        : ''}
                </div>
                <div style={{marginTop: 21}}>
                    手术时间：{' '}
                    {isNotBlank(patient?.operationTime)
                        ? dayjs(patient?.operationTime).format('hh:mm:ss')
                        : ''}
                </div>
                <div style={{marginTop: 21}}>科室：{patient?.department}</div>
                <div style={{marginTop: 21}}>主刀医生：{patient?.doctor}</div>
                <div style={{marginTop: 21}}>手术名称：</div>
            </div>
            <div className={styles.right}>
                <Tabs items={items}/>
            </div>
        </div>
    );
};

export default Patient;
